<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取事件对象event</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background: orange;
        }
        button{
            margin: 50px 0  0 50px;
        }
    </style>
</head>
<body>
    <div>
        <button>点击</button>
    </div>
    <form action="#">
        <input type="text">
        <input type="reset">
    </form>
    <script>
    var div = document.getElementsByTagName("div")[0];
    var btn = document.getElementsByTagName("button")[0];
    //冒泡  
    div.onclick = function(){alert("div")};
    // btn.onclick = function(){alert("btn")}//冒泡 及 从下往上 父节点事件也会被调用
    //组织冒泡
    //首先要获取事件对象event 
    //获取方法为 加入实参 event
    // function show(num){
    //     alert(num);
    //     console.log(event)
    // }
    // btn.onclick = function(){
    //     show(1)
    // }//没有实参时，console.log(event)不能生效 及 找不到事件对象的event
        // function show(num){
        //     alert(num);
        //     console.log(event);
        // }
        // btn.onclick = function(){
        //     show(1);
        //     event.stopPropagation();
        // }没有加形参也可以？？？？
    function show(event,num){
        alert(num);
        console.log(event)
    }
    btn.onclick = function(){
        show(event,1)
        event.stopPropagation();
    }//加入实参event

    //阻止浏览器默认事件  如form 表单中的 reset
    
    var reset = document.getElementsByTagName("input")[1];
    function showReset(a){
        alert("你点了重置按钮");
        alert(a);
    }
    reset.onclick = showReset;//弹出你点了充值按钮 同时 重置form表单内容
    //阻止方法 主流浏览器
    // reset.onclick = function(){
    //     showReset(1);
    //     // console.log(event);
    //     event.preventDefault();
    // } 
    // ie浏览器
    reset.onclick = function(){
        showReset(1);
        console.log(event);
        event.returnValue = false;
    } 
    

    </script>
</body>
</html>